<template>
    <div
        class="dialog-bg"
        v-if="show"
    >
        <div
            class="dialog-main"
            v-if="dialogOptions.type == 'alert'"
        >
            <div class="dialog-title">{{dialogOptions.title}}</div>
            <div class="dialog-detail">{{dialogOptions.detail}}</div>
            <div class="dialog-ctr">
                <div
                    class="dialog-sure"
                    @click="alertSure"
                >确定</div>
            </div>
        </div>
        <div
            class="dialog-main"
            v-if="dialogOptions.type == 'confirm'"
        >
            <div class="dialog-title">{{dialogOptions.title}}</div>
            <div class="dialog-detail">{{dialogOptions.detail}}</div>
            <div class="dialog-ctr">
                <div
                    class="dialog-cancle"
                    @click="confrimCancle"
                >取消</div>
                <div
                    class="dialog-sure"
                    @click="confrimSure"
                >确定</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CommonDialog',
    props: {
        dialogOptions: Object
    },
    data () {
        return {
            show: false
        }
    },
    methods: {
        showDialog () {
            this.show = true
        },
        closeDialog () {
            this.show = false
        },
        alertSure () {
            this.closeDialog()
            if (typeof (this.dialogOptions.alertSureFunc) === 'function') {
                this.dialogOptions.alertSureFunc()
            }
        },
        confrimSure () {
            this.closeDialog()
            if (typeof (this.dialogOptions.confirmSureFunc) === 'function') {
                this.dialogOptions.confirmSureFunc()
            }
        },
        confrimCancle () {
            this.closeDialog()
            if (typeof (this.dialogOptions.confirmCancleFunc) === 'function') {
                this.dialogOptions.confirmCancleFunc()
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.dialog-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    z-index 99
    display flex
    align-items center
    justify-content center
    .dialog-main
        width 300px
        background #fff
        border-radius 5px
        overflow hidden
        .dialog-title
            line-height 40px
            text-align center
            background #d7463c
            font-size 16px
            color #fff
        .dialog-detail
            padding 20px
            font-size 13px
            color #333
            line-height 1.5
            text-align center
        .dialog-ctr
            display flex
            justify-content center
            padding 20px
            .dialog-sure
                width 90px
                line-height 36px
                text-align center
                font-size 13px
                color #fff
                background #d7463c
                border-radius 3px
                margin 0 20px
            .dialog-cancle
                width 90px
                line-height 36px
                text-align center
                font-size 13px
                color #fff
                background #dcdcdc
                border-radius 3px
                margin 0 20px
</style>
